Vue.js 2.x by Example: Example-driven guide to build web apps with Vue.js for beginners by Mike Street

Author:Mike Street [Street, Mike]
Language: eng
Format: epub
Tags: COM060130 - COMPUTERS / Web / Design, COM060160 - COMPUTERS / Web / Web Programming, COM051260 - COMPUTERS / Programming Languages / JavaScript
Publisher: Packt Publishing
Published: 2017-12-27T00:00:00+00:00

Caching parent folders

Caching the parent structure is the next preemptive thing we can do to help speed up our app. Say we had navigated to our images directory, /images/holiday/summer, and wished to share this with a friend or colleague. We would send them the URL with this in the URL hash and, on page load, they would see the contents. If they then navigated up the tree using the breadcrumb to /images/holiday, for example, they would need to wait for the app to retrieve the contents.

Using the breadcrumb component, we can cache the parent directories and so, on navigating to the holiday folder, the user would be presented instantly with its contents. While the user is then browsing this folder, all of its subfolders are being cached with the previous methods.

To cache the parent folders, we already have a component displaying the path with access to the slugs of all the parent folders we can loop through—the breadcrumb.

Before we start the caching process, we need to update the folders computed function within the component. This is because currently, we store the path with the hash prepended, which creates an invalid path for the Dropbox API. Remove the hash from the object being pushed to the output array and add it in the template, in a similar fashion to the folder component:

Vue.component('breadcrumb', {

template: '<div>' +

'<span v-for="(f, i) in folders">' +

'<a :href="\'#\' + f.path">{{ f.name || 'Home' }}</a>' +

'<i v-if="i !== (folders.length - 1)"> &raquo; </i>' +

'</span>' +

'</div>',

computed: {

folders() {

let output = [],

slug = '',

parts = this.$store.state.path.split('/');

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.